<template>
  <div>
    <el-row :gutter="15">
      <el-col :span="8">
        <el-card header="汇聚">
          <div class="mar-t-0">
            <p class="lh-18">总览</p>
            <el-row :gutter="15">
              <el-col :span="12" class="text-center">
                <div class="fts-18">11.1亿</div>
                <el-divider></el-divider>
                <div class="fts-12 text-black-2">数据量(条)</div>
              </el-col>
              <el-col :span="12" class="text-center">
                <div class="fts-18">50</div>
                <el-divider></el-divider>
                <div class="fts-12 text-black-2">目录数量(个)</div>
              </el-col>
            </el-row>
          </div>
          <div class="mar-t-0">
            <p class="lh-18">当日</p>
            <el-row :gutter="15">
              <el-col :span="12" class="text-center">
                <div class="fts-18">98.5万</div>
                <el-divider></el-divider>
                <div class="fts-12 text-black-2">数据量(条)</div>
              </el-col>
              <el-col :span="12" class="text-center">
                <div class="fts-18">8</div>
                <el-divider></el-divider>
                <div class="fts-12 text-black-2">目录数量(个)</div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>

      <el-col :span="16">
        <el-card header="近一个月汇聚走势图">
          <div class="w-100p h-200">
            <rs-echarts :option="line1Option"></rs-echarts>
          </div>
        </el-card>
      </el-col>

    </el-row>

    <el-row :gutter="15">
      <el-col :span="8">
        <el-card header="共享">
          <div class="mar-tb-0">
            <p class="lh-18">总览</p>
            <el-row :gutter="15">
              <el-col :span="12" class="text-center">
                <div class="fts-18">8.4亿</div>
                <el-divider></el-divider>
                <div class="fts-12 text-black-2">数据量(条)</div>
              </el-col>
              <el-col :span="12" class="text-center">
                <div class="fts-18">40</div>
                <el-divider></el-divider>
                <div class="fts-12 text-black-2">目录数量(个)</div>
              </el-col>
            </el-row>
          </div>
          <div class="mar-tb-0">
            <p class="lh-18">当日</p>
            <el-row :gutter="15">
              <el-col :span="12" class="text-center">
                <div class="fts-18">48.1万</div>
                <el-divider></el-divider>
                <div class="fts-12 text-black-2">数据量(条)</div>
              </el-col>
              <el-col :span="12" class="text-center">
                <div class="fts-18">34</div>
                <el-divider></el-divider>
                <div class="fts-12 text-black-2">目录数量(个)</div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>


      <el-col :span="16">
        <el-card header="近一个月共享走势图">
          <div class="w-100p h-200">
            <rs-echarts :option="line2Option"></rs-echarts>
          </div>
        </el-card>
      </el-col>

    </el-row>

    <el-row type="flex" :gutter="15">
      <el-col :span="8">
        <el-card header="数据类型占比分析">
          <div class="w-100p h-200">
            <rs-echarts :option="pieOption1"></rs-echarts>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card header="任务">
          <div class="w-100p h-200">
            <rs-echarts :option="pieOption2"></rs-echarts>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card header="数据质量TOP5">
          <div class="w-100p h-200">
            <rs-echarts :option="barOption"></rs-echarts>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-card header="资源目录">
          <avue-crud 
            :data="table1Data"
            :option="table1Option"
            v-loading="table1Loading"
            @on-load="onLoad1"
            @refresh-change="onLoad1"
          >
            <template slot="index" slot-scope="scope">
              <div class="text-right mar-r-15">
                <i v-if="scope.row.$index < 3" class="portal-icon_huangguan" :class="{
                  'text-sort-1': scope.row.$index == 0,
                  'text-sort-2': scope.row.$index == 1,
                  'text-sort-3': scope.row.$index == 2
                  }"></i>
                <span style="margin-left: 10px">{{ scope.row.$index + 1 }}</span>
              </div>
            </template>
          </avue-crud>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>
<script>
import { formatDate } from '@/filters/index'
import { line1Option , getDataCollectCountStr , createTestData , getPre , pieOption , barOption} from './chart-option';

import {
  catalogTop10
} from '@/api/overview/index';

const baseTableOption = {
  height: 'auto',
  calcHeight: 30,
  tip: false,
  searchShow: true,
  searchMenuSpan: 6,
  border: false,
  editBtn: false,
  addBtn: false,
  menuWidth: 350,
  dialogClickModal: false,
  menu: false
}

const createData = (headers) => {
  let data = [];
  for(let i = 0; i < 10; i++){
    let item = {};
    headers.forEach(
      (header , index) => {
        if(header.dType === 'sort'){
          item[header.prop] = (i + 1);
        }
        if(header.dType === 'time'){
          item[header.prop] = formatDate(Date.now() , 'YYYY-MM-DD HH:mm:ss');
        }
        if(header.dType === 'string'){
          item[header.prop] = '假数据' + (index + 1);
        }
        if(header.dType === 'number'){
          item[header.prop] = Math.ceil(Math.random() * 100000)
        }
      }
    )
    data.push(item);
  }
  return data;
}

export default {
  data(){
    return {
      line1Option: line1Option(),
      line2Option: line1Option(),
      pieOption1: null,
      pieOption2: null,
      barOption: barOption(),

      table1Loading: false,
      table1Data: [],
      table1Option: {
        ...baseTableOption,
        column: [
          {
            label: '排名',
            prop: 'index',
            width: 50
          },
          {
            label: '目录名称',
            prop: 'name'
          },
          {
            label: '数据量(条)',
            prop: 'dataRecordCount'
          },
          {
            label: '主题',
            prop: 'topicName'
          },
          {
            label: '行业',
            prop: 'industryName'
          },
          {
            label: '共享类型',
            prop: 'shareTypeName'
          },
          {
            label: '更新频率',
            prop: 'updateFrequencyDictName'
          },
          {
            label: '创建人',
            prop: 'createUserName'
          },
          {
            label: '创建时间',
            prop: 'createTime'
          }
        ]
      }
    }
  },
  inject: ['indexMain'],
  methods: {
    initOption(){
      let handle = (legends, unit , option) => {
        let count = 0 , data = {
          legend: [],
          data: [],
          legendDatas: {}
        };
        if(!option){
          option = {};
        }
        let valueName = option.valueName || 'value';
        let labelName = option.labelName || 'name';
        let tempData = option.data || createTestData(legends);
        tempData.forEach(
          item => {
            count += item[valueName];
            data.legend.push(item[labelName]);
            data.legendDatas[item[labelName]] = {
              pre: '',
              value: getDataCollectCountStr(item[valueName] , unit),
              c: item[valueName]
            }
            data.data.push({
              ...item,
              name: item[labelName],
              value: item[valueName]
            })
          }
        )
        data.legendDatas = getPre(count , data.legendDatas);
        
        return data;
      };

      this.pieOption1 = pieOption(handle(['半结构化' , '非结构化' , '结构化']));

      let data1 = handle(['数据采集 上线' , '数据采集 下线'] , '个');
      let data2 = handle(['元数据采集 上线' , '元数据采集 下线'] , '个');
      let data3 = handle(['数据质量 上线' , '数据质量 下线'] , '个');

      let pie = {
        type: 'pie',
        center: ['75%' , '50%'],
        label: {
          show: false
        },
        labelLine: {
          show: false
        }
      };
      let data4 = {
        legend: [].concat(data1.legend).concat(data2.legend).concat(data3.legend),
        legendDatas: {
          ...data1.legendDatas,
          ...data2.legendDatas,
          ...data3.legendDatas
        },
        series: [
          {
            ...pie,
            radius: ['0%' , '20%'],
            data: data1.data
          },
          {
            ...pie,
            radius: ['25%' , '40%'],
            data: data2.data
          },
          {
            ...pie,
            radius: ['45%' , '60%'],
            data: data3.data
          }
        ]
      }

      this.pieOption2 = pieOption(data4 , function(name) {
        return `${name}  {value|${data4.legendDatas[name]['value']}}`;
      } , {
        color: ['#39a0ff' , 'rgba(57 , 160 , 255 , .5)' , '#36cbcb' , 'rgba(54 , 203 , 203 , .5)' , '#fcd77c' , 'rgba(252 , 215 , 124 , .5)']
      });
  
    },
    setDataIndex(data){
      data.forEach(
        (item , index) => {
          item['index'] = index;
        }
      )
      return data;
    },
    onLoad1(){
      this.table1Loading = true;
      catalogTop10().then(
        res => {
          this.table1Data = this.setDataIndex(res.data.data || []);
          this.table1Loading = false;
        }
      )
    },
  },
  created(){
    this.indexMain.showMenus = false;
    this.initOption();
  },
  mounted(){
    this.indexMain.showMenus = false;
  }
}
</script>